window.onload = function () {
    //initMyImgShow();
}

function closeMyImg() {
    $(".popup").remove();
}

function removeMyImg() {
    $(".popup").remove();
}

function initMyImgShow() {
    $('.z_addImg img').unbind("click").bind('click', function (event) {
        var isbig = $(this).data("big") + "";
        if ("false" == isbig) {
            return;
        }
        var myImg = new Image;
        myImg.src = $(this).attr("src");
        var srcThis = $(this).attr("src");
        var bg = "";
        bg += '<div id="popup" class="popup">';
        bg += '<div class="boxCen">';

        bg +='<div id="clipArea" class="file-clip">'
        //
        // bg +=    '<div class="photo-clip-view" style="position: absolute; left: 50%; top: 50%; width: 200px; height: 200px; margin-left: -100px; margin-top: -100px;">'
        // bg +=       '<div class="photo-clip-moveLayer" style="transform-origin: 0px 0px 0px; transition-timing-function: cubic-bezier(0.1, 0.57, 0.1, 1); transition-duration: 0ms; transform: translate(-97px, -11.5px) scale(1) translateZ(0px); touch-action: none; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); width: 394px; height: 223px;">'
        // bg +=           '<div class="photo-clip-rotateLayer" style="width: 394px; height: 223px; transform: translateZ(0px) translate(0px, 0px) rotate(0deg); transform-origin: 0px 0px 0px;">'
        // bg +=               '<img src="" style="user-select: none; pointer-events: none;">'
        // bg +=           '</div>'
        // bg +=       '</div>'
        // bg +=    '</div>';
        //
        // bg += '<div class="photo-clip-mask" style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; pointer-events: none;">'
        // bg +=   '<div class="photo-clip-mask-left" style="position: absolute; left: 0px; right: 50%; top: 50%; bottom: 50%; width: auto; height: 200px; margin-right: 100px; margin-top: -100px; margin-bottom: -100px; background-color: rgba(0, 0, 0, 0.5);"></div>'
        // bg +=   '<div class="photo-clip-mask-right" style="position: absolute; left: 50%; right: 0px; top: 50%; bottom: 50%; margin-left: 100px; margin-top: -100px; margin-bottom: -100px; background-color: rgba(0, 0, 0, 0.5);"></div>'
        // bg +=   '<div class="photo-clip-mask-top" style="position: absolute; left: 0px; right: 0px; top: 0px; bottom: 50%; margin-bottom: 100px; background-color: rgba(0, 0, 0, 0.5);"></div>'
        // bg +=     '<div class="photo-clip-mask-bottom" style="position: absolute; left: 0px; right: 0px; top: 50%; bottom: 0px; margin-top: 100px; background-color: rgba(0, 0, 0, 0.5);">'
        // bg +=    '</div>'
        // bg +=     '<div class="photo-clip-area" style="border: 1px dashed rgb(221, 221, 221); position: absolute; left: 50%; top: 50%; width: 200px; height: 200px; margin-left: -101px; margin-top: -101px;">'
        // bg +=     '</div>'
        // bg += '</div>'


        bg +='</div>';

        bg +='<div class="file" >';
        bg +='<div class="file-btn">点击上传图片</div>';
        bg +='<input type="file" class="service-file" id="file">';
        bg +='</div>';
        bg +='<div class="file-btn" id="clipBtn">裁剪图片</div>';
        bg +='<div class="file-btn" id="rotaBtn">选转</div>';
        bg +='<div class="file-btn" id="bigImg" >放大</div>';
        bg +='<div class="file-btn" id="smallImg">缩小</div>';
        bg +='<div class="red">（鼠标滚轮为缩放，每次双击则顺时针旋转90度）</div>';
        bg +='</div>';
        bg +='<div id="imgHtml" class="clipEnd"></div>';
        // $('#popup').html(html);
        bg += '</div>';
        //$(this).parent().after(bg);
        $("body").append(bg);
        clip();
    })


}


function clip(){
    $("#clipArea").photoClip({
        size: [200, 200],
        file: "#file",
        ok: "#clipBtn",
        view:"#imgcav",
        rotaBtn:'#rotaBtn',
        bigBtn:'#bigImg',
        smallBtn:'#smallImg',
        outputSize:[200, 200],
        loadStart: function() {
            console.log("照片读取中");
        },
        loadComplete: function() {
            console.log("照片读取完成");
        },
        clipFinish: function(dataURL) {
            var img = '<img src="'+dataURL+'">';
            $('#imgHtml').html(img);
        }
    });
}

